<template>
  <div id="app">
    <v3-waterfall class="waterfall"
                  :list="list" :gap="12"
                  :colWidth="280"
                  :distanceToScroll="200"
                  :isLoading="false"
                  @scrollReachBottom="getNext">
      <template v-slot:default="slotProp">
        <div style="color:red;">
          {{ slotProp.item.name }}
        </div>
      </template>
    </v3-waterfall>
  </div>
</template>

<script>


  import {ref} from "vue";

  export default {
    name: 'App',
    setup() {
      const list = ref([
        {name: 'hello'}
      ])


      function getNext() {
        console.log('getNext..')
      }

      return {
        list,
        getNext
      }
    },
  }
</script>

<style>
#app {
  height: 1000px;
  width: 500px;
}

.waterfall {
  padding: 10px;
  background: #999999;
}
</style>
